<template>
	<view>
		<chatNavBar ></chatNavBar>
		
		
		<!-- 聊天消息展示区域 -->
		<view class="showChatMessageListBox">
			<view class="messageList"   ref="scrollView" @scroll="scroll">
				
				<chatMessageItem v-for="(messager,index) in $store.state.chat.chatObjectInfo.chatMessageList" :key="index" :chatMessage="messager" ></chatMessageItem>
				
			</view>
		</view>
		
		<!-- 功能按钮区域 -->
		<chatFunctionBox :sendMessageBox="sendMessageBox"></chatFunctionBox>
		
		<!-- 发送消息框 -->
		<view class="sendMessageBox" contenteditable="true" ref="messageBox">
			
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				chatObjectInfo:null,
				ifScroll:true,
				sendMessageBox:null
			}
		},
		watch:{
			'messageList':{
				   handler(newName, oldName) {					   
					   if(this.ifScroll){
						   this.$nextTick(() => {
						   				console.log(this.$refs.scrollView.$el.scrollHeight)
						   				   // console.log()
										   this.scrollToBottom()
						   			   });
						     
						     }
							
					   },
				      // immediate: true,
					  deep:true
				    }
			},
		computed:{
			messageList(){
				return this.$store.state.chat.chatObjectInfo.chatMessageList
			}
		},
		onShow() {
			if(this.$refs.scrollView){ //有可能聊天页面显示的时候 该组件还没加载好所以获取不到 如果该组件加载完毕就滚动到最下面
				 this.scrollToBottom()
			}
		},
		onUnload() {
			this.$store.commit('chat/setChatObjectData',{})//清除vuex中保存的上一个聊天对象的信息
			this.$store.commit('chat/setChatMessageList',[])//清除vuex中保存的上一个聊天对象的记录
		},

		mounted() {
			// this.$refs.scrollView.scrollTo(this.$refs.scrollView.$el.clientHeight)
			// console.log(this.scrollHeight)
			this.sendMessageBox=this.$refs.messageBox //组件加载完毕将 发送消息框这个组件对象传给功能组件 方便获取并操作发送的消息
			 
		},
		methods: {

			scroll(){
				if(this.$refs.scrollView.$el.scrollTop+this.$refs.scrollView.$el.clientHeight==this.$refs.scrollView.$el.scrollHeight){
					this.ifScroll=true
				}else{
					this.ifScroll=false
				}
			},
			scrollToBottom(){
				this.$refs.scrollView.$el.scrollTop=this.$refs.scrollView.$el.scrollHeight-this.$refs.scrollView.$el.clientHeight
				
			}
		}
	}
</script>

<style scoped lang="scss">
.showChatMessageListBox{
	width: 100%;
	height: 65vh;
	background-color: #F5F5F5;
	// border: 1px solid green;
	.messageList{
		height: 65vh;
		width: 100%;
		// border: 1px solid green;
		overflow: scroll;
	}
}


.sendMessageBox{
	width: 100%;
	height:20vh;
	overflow: scroll;
	// border: 1px solid red;
}
</style>
